<script setup>
import axios from 'axios'
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const httpRequest = axios.create({
  baseURL: '/api'
})

onMounted(() => {
  remoteList()
})

const tableData = ref([])
const selections = ref([])
const drawerInfoVisible = ref(false)
const dialogVisible = ref(false)
const editMode = ref(false)
const userInfo = ref({
  "username": "",
  "age": undefined,
  "gender": undefined,
  "password": ""
})

const remoteList = () => {
  httpRequest.get("/users/list")
      .then(res => {
        tableData.value = res.data.data
      })
}
const handleSelectionChange = (val) => {
  selections.value = val
}

const showInfo = (username) => {
  editMode.value = false
  httpRequest.get(`/users/${username}`)
      .then(res => {
        userInfo.value = res.data.data
        drawerInfoVisible.value = true
      })
}

const removeByUserName = (username) => {
  ElMessageBox.confirm(`当前操作会删除${username}`,
      'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        httpRequest.delete(`/users/del`, {
          params: {
            username: username
          }
        }).then(res => {
          if (res && res.data.code === 1) {
            ElMessage({
              type: 'success',
              message: '数据删除成功',
            })
            remoteList()
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })

}

const showAddDialog = () => {
  userInfo.value.username = undefined
  userInfo.value.age = undefined
  userInfo.value.gender = undefined
  userInfo.value.password = undefined
  dialogVisible.value = true
}

const save = () => {
  httpRequest.post('/users/register', userInfo.value)
      .then(res => {
        if (res.data.code === 1) {
          ElMessage({
            type: 'success',
            message: '数据添加成功',
          })
          dialogVisible.value = false
          remoteList()
        } else {
          ElMessage({
            type: 'error',
            message: res.data.msg
          })
        }
      })
}

const delBatch = () => {
  const usernameList = selections.value.map(item => item.username)
  ElMessageBox.confirm(`当前操作批量删除[${usernameList}]`,
      'Warning', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        httpRequest.delete(`/users/delBatch`, {
          params: {
            username: usernameList.join(',')
          }
        }).then(res => {
          if (res && res.data.code === 1) {
            ElMessage({
              type: 'success',
              message: '数据删除成功',
            })
            remoteList()
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}

const update = () => {
  httpRequest.put('/users/updateUserByUsername', userInfo.value)
      .then(res => {
        if (res.data.code === 1) {
          ElMessage({
            type: 'success',
            message: '数据更新成功',
          })
          editMode.value = false
          remoteList()
        }
      })
}

</script>

<template>
  <!-- 操作栏 -->
  <el-row justify="end">
    <el-button type="primary" @click="showAddDialog">新增</el-button>
    <el-button type="danger" :disabled="selections.length <= 0" @click="delBatch">批量删除</el-button>
  </el-row>
  <br/>
  <!--  数据表 -->
  <el-table
      :data="tableData"
      border
      @selection-change="handleSelectionChange">
    <el-table-column align="center" type="selection" width="55"/>
    <el-table-column align="center" property="username" label="用户名"></el-table-column>
    <el-table-column align="center" property="age" label="姓名"></el-table-column>
    <el-table-column align="center" property="gender" label="性别"></el-table-column>
    <el-table-column align="center" property="password" label="密码"></el-table-column>
    <el-table-column align="center" label="操作" width="160">
      <template #default="scope">
        <el-button text @click="showInfo(scope.row.username)" type="warning">详情</el-button>
        <el-button text @click="removeByUserName(scope.row.username)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 详情的右侧抽屉 -->
  <el-drawer
      v-model="drawerInfoVisible"
      title="详情"
      size="400"
      direction="rtl">
    <div v-if="!editMode">
      <h5>姓名：{{ userInfo.username }}</h5>
      <h5>年龄：{{ userInfo.age }}</h5>
      <h5>性别：{{ userInfo.gender }}</h5>
    </div>
    <div v-else>
      <el-form>
        <el-form-item label="姓名">
          <el-input v-model="userInfo.username" placeholder="请选择姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number placeholder="请输入年龄" style="width: 100%;" :min="1" :max="99" :precision="0"
                           v-model="userInfo.age"></el-input-number>
        </el-form-item>
        <el-form-item label="性别">
          <el-select placeholder="请选择性别" v-model="userInfo.gender">
            <el-option :value="1" label="男"></el-option>
            <el-option :value="2" label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userInfo.password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #header="{ close, titleId, titleClass }">
      <el-space>
        <span>{{ editMode ? '编辑' : '详情' }}</span>
        <el-button text type="primary" @click="editMode = true" v-if="!editMode">编辑</el-button>
        <el-button text type="primary" @click="update" v-if="editMode">提交</el-button>
        <el-button text type="warning" @click="editMode = false" v-if="editMode">取消</el-button>
      </el-space>
    </template>
  </el-drawer>

  <!-- 新增弹窗 -->
  <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="40%">
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="userInfo.username" placeholder="请选择姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number placeholder="请输入年龄" style="width: 100%;" :min="1" :max="99" :precision="0"
                         v-model="userInfo.age"></el-input-number>
      </el-form-item>
      <el-form-item label="性别">
        <el-select placeholder="请选择性别" v-model="userInfo.gender">
          <el-option :value="1" label="男"></el-option>
          <el-option :value="2" label="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="userInfo.password" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

